<!doctype html>
<html>
	<head>
		<title>MediaController</title>
		<script src="static/WebSocket.js" type="text/javascript"></script>
		<script src="static/App.js" type="text/javascript"></script>
		<link rel="stylesheet" href="static/style.css" type="text/css">
	</head>
	<body>
		<div id="container">
			<div id="logo">&nbsp;</div>

			<div id="control_div">
				<img id="previous" src="static/img/previous.png" width="30px" height="30px" />
				<img id="pause" src="static/img/pause.png" width="30px" height="30px" />
				<img id="stop" src="static/img/stop.png" width="30px" height="30px" />
				<img id="next" src="static/img/next.png" width="30px" height="30px" />
				<img id="min" src="static/img/sound_delete.png" width="30px" height="30px" />
				<img id="plus" src="static/img/sound_add.png" width="30px" height="30px" />
			</div>
			<div id="search_div">
				<form action="" method="POST" id="form" onsubmit="return false;">
					<input type="text" id="search" value="Your keywords..." onfocus="this.value = (this.value == 'Your keywords...') ? '' : this.value;" onblur="this.value = (this.value == '') ? 'Your keywords...' : this.value;" autocomplete="off" />
				</form>
			</div>
			<div id="progress_div">
				<progress class="loadingBar" id="progress" value="0" max="100"></progress>
			</div>
			<div id="log">

			</div>

		</div>
	</body>
</html>